<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程-我的-121邹圣洁</title>
    <link rel="stylesheet" href="download/font_ewrrrydj26/iconfont.css">
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>
        body,ul,p{
            margin: 0;
            padding: 0;
        }
        body{
            background: linear-gradient(to right,#d1d8e3,#76a9d5a3,#d1d8e3);
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #303030;
            display: inline-block;
            font-size: 20px;
        }
        #nav{
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            z-index: 100;
            display: flex;
            background-color: #fff;
            box-shadow: 0px 0px 0px 3px rgb(247, 247, 247);
        }
        #nav li{
            width: 20%;
            text-align: center;
            font-family: "华文细黑";
            font-size: 14px;
        }
        .iconfont{
            font-size: 30px;
            letter-spacing: 20px;
        }
        .icon-xiaoxi,.icon-SX_015,.icon-wodejifen{
            font-size: 28px;
        }
        p{
            margin-right: 20px;
            font-size: 14px;
            font-weight: normal;
        }
        #nav a:hover,a:active{
            color: #3d85fb;
        }

        #head{
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
        }
        #head .he{
            display: flex;
            width: 100%;
            margin-top: 10px;
        }
        #head .he li:nth-child(1){
            flex-grow: 10;
        }
        .icon-saoyisao{
            margin-left: 20px;
            color: #313131;
        }
        .icon-qiandao{
            font-size: 28px;
            margin-right: 20px;
            color: #313131;
        }
        .icon-ziyuan{
            font-size: 25px;
            margin-right: 20px;
            color: #313131;
        }
        .icon-shezhi{
            font-size: 28px;
            margin-right: 20px;
            color: #313131;
        }
        .menu .xlcd{
            font-size: 28px;
            color: #313131;
        }

        #name{
            width: 96%;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 20px;
            margin-top: 80px;
        }
        #name .ul1{
            width: 92%;
            margin: 0 auto;
            display: flex;
        }
        #name .ul1 li img{
            width: 65px;
            height: 65px;
            border-radius: 50px;
        }
        #name .ul1 li .yh{
            font-size: 20px;
            margin-left: 20px;
            margin-top: 10px;
        }
        #name .ul1 li .an{
            background-color: #e9f3ff;
            border: none;
            border-radius: 50px;
            color: #5281c7;
            font-weight: bold;
            margin-left: 10px;
            letter-spacing: 2px;
        }
        #name .ul1 li .lv{
            background-color: #ebfadd;
            color: #3da333;
            margin-left: 20px;
            border-radius: 10px 0 10px 0  ;
            border: none;
            margin-top: 5px;
        }
        #name .hui{
            font-size: 14px;
            color: #afafaf;
            margin-left: 60px;
            margin-top: 10px;
        }
        #name .ul2{
            width: 92%;
            margin: 0 auto;
            display: flex;
            margin-top: 10px;
            padding-bottom: 10px;
        }
        #name .ul2 li{
            font-size: 14px;
            color: #4d4d4d;
            margin-right: 20px;
        }
        #name .ul2 li .c{
            color: #313131;
            font-weight: bold;
        }

        #main{
            width: 100%;
             background-color: #dddddd;;
            margin-top: 20px;
            border-radius: 20px;
        }
        #main #header{
            width: 100%;
            background-color: #fff;
            border-radius: 20px 20px 0 0;
            display: flex;
            height: 60px;
            z-index: 10;
            top: 0;
            left: 0;
        }
        #main #header ul{
            display: flex;
            width: 50%;
            margin: 0 auto;
            margin-top: 10px;
        }
        #main #header ul li{
            font-size: 18px;
            color: #313131;
            width: 50%;
            text-align: center;
        }
        #main #header ul li:hover{
            font-size: 22px;
            color: #030303;
        }
        #main .tb{
            width: 98%;
            margin: 0 auto;
            background-color: #fff;
            border-radius:0 0 20px 20px;
        }
        #main .tb ul{
            display: flex;
            width: 85%;
            padding-top: 20px;
            padding-bottom: 10px;
            margin-left: 15%;
        }
        #main .tb ul li{
            width: 25%;
        }
        #main .tb ul li img{
            width: 50px;
            height: 50px;
        }
        #main .sc{
            width: 98%;
            background-color: #fff;
            margin-left: 1%;
            margin-top: 10px;
            border-radius:20px;
        }
        #main .sc ul{
            width: 90%;
            display: flex;
            margin: 0 auto;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        #main .sc ul li{
            width: 25%;
            text-align: center;
        }
        #main .sc ul li p:nth-child(1){
            font-size: 18px;
            color: #000;
        }
        #main .sc ul li p:nth-child(2){
            font-size: 14px;
            color: #313131;
        }
        #main .z{
            width: 98%;
            background-color: #fff;
            margin-left: 1%;
            margin-top: 15px;
            border-radius:20px;
        }
        #main .z ul{
            width: 98%;
            display: flex;
            margin: 0 auto;
        }
        #main .z ul li{
            width: 33%;
        }
        #main .z ul li img{
            width: 180px;
        }
        #main .z ul li:nth-child(2){
            flex-grow: 20;
            text-align: center;
        }
        #main .z ul li:nth-child(3){
            text-align: right;
        }
        .ws .swiper-wrapper{
        height: 70px;
        line-height: 40px;
        font-size: 14px;
        color: rgb(26, 26, 26);
        letter-spacing: 2px;
        margin-left: 15px;
        margin-top: 20px;
      }
      .ws .swiper-slide{
        height: 40px;
      }
      #main .z ul li .ws .hei{
        font-size: 18px;
        color: #000;
      }
      #main .z ul li .ws .hui{
        font-size: 13px;
        color: #474747;
      }
      #main .qb{
        width: 98%;
        background-color: #fff;
        margin-left: 1%;
        margin-top: 10px;
        border-radius:20px;
      }
      #main .qb ul{
        width: 96%;
        display: flex;
        margin: 0 auto;
        padding-top: 10px;
      }
      #main .qb ul:nth-child(1) li{
        width: 13%;
      }
      #main .qb ul:nth-child(1) li:nth-child(1){
        font-weight: bold;
        flex-grow: 20;
        font-size: 16px;
      }
      #main .qb ul:nth-child(1) li:nth-child(2){
        text-align: right;
      }
      .icon-guanbi{
        font-size: 15px;
        color: #636363;
      }
      #main .qb ul:nth-child(2) li{
        text-align: center;
        width: 25%;
      }
      #main .qb ul:nth-child(2) .p1{
        font-size: 20px;
        color: #000;
      }
      #main .qb ul:nth-child(2) .p1 .d{
        font-size: 12px;
        color: #000;
      }
      #main .qb ul:nth-child(2) .p2{
        font-size: 14px;
        color: #1a1a1a;
        margin-top: 5px;
      }
      #main .qb ul:nth-child(2) .p3{
        font-size: 12px;
        color: #535353;
        margin-top: 5px;
        margin-bottom: 20px;
      }
      #main .cz{
        width: 98%;
        background: linear-gradient(#e0e5ee,#84b7e4a3);
        margin-left: 1%;
        margin-top: 10px;
        border-radius:20px;
      }
      #main .cz .b{
        font-weight: bold;
        font-size: 16px;
        margin-left: 25px;
        padding-top: 20px;
      }
      #main .cz ul{
        width: 85%;
        display: flex;
        margin-left: 15%;
        margin-top: 20px;
      }
      #main .cz ul li{
        width: 33%;
      }
      #main .cz ul li .x{
        font-size: 14px;
      }
      #main .cz ul li .wh{
        font-size: 30px;
        font-weight: bold;
        font-family: "华文细黑";
      }
      #main .cz ul li .zz{
        font-size: 13px;
        margin-left: 35px;
        margin-top: 5px;
      }
      #main .cz ul li img{
        width: 60px;
        height: 60px;
        margin-top: 20px;
      }
      #main .cz ul li .bjs{
        width: 130px;
        height: 130px;
        background-color: rgba(255, 255, 255, 0.152);
        border-radius: 10px;
        margin-top: -40px;
        margin-bottom: 20px;
        text-align: center;
      }
      #main .cz ul li .bjs p{
        font-size: 13px;
        color: #6f7b91;
        margin-top: 10px;
        margin-left: 20px;
      }
      #main .wd,#main .hd{
        width: 98%;
        background-color: #fff;
        margin-left: 1%;
        margin-top: 10px;
        border-radius:20px;
      }
      #main .wd ul,#main .hd ul{
        width: 96%;
        margin-left: 2%;
        display: flex;
      }
      #main .wd ul:nth-child(1) li,#main .hd ul:nth-child(1) li{
        width: 13%;
        margin-top: 15px;
      }
      #main .wd ul:nth-child(1) li:nth-child(1),#main .hd ul:nth-child(1) li:nth-child(1){
        font-weight: bold;
        flex-grow: 20;
        font-size: 16px;
      }
      #main .wd ul:nth-child(1) li:nth-child(2),#main .hd ul:nth-child(1) li:nth-child(2){
        text-align: right;
      }
      #main .wd ul:nth-child(2) li,#main .wd ul:nth-child(3) li,#main .hd ul:nth-child(2) li{
        width: 25%;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      #main .wd ul li img,#main .hd ul li img{
        width: 60px;
        height: 60px;
      }
      #main .wd ul li .te{
        width: 110px;
        height: 60px;
      }
      #main .wd ul li p,#main .hd ul li p{
        color: #494949;
        font-size: 13px;
        margin-left: 20px;
      }
      #main .wdkp{
        margin-left: 40px;
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 10px;
      }
      #main .f{
        display: flex;
        flex-wrap: wrap;
        width: 98%;
        margin: 0 auto;
      }
      #main .f .ulo{
        width: 340px;
        margin-left: 20px;
        background-color: #fff;
        border-radius: 15px;
        margin-top: 10px;
      }
      #main .f .ulo li{
        width: 300px;
        margin: 0 auto;
      }
      #main .f .ulo li:nth-child(1){
        display: flex;
        height: 60px;
        line-height: 60px;
      }
      #main .f .ulo li:nth-child(1) img{
        width: 40px;
        height: 40px;
        margin-top: 10px;
      }
      #main .f .ulo li:nth-child(1) .kpd{
        font-size: 16px;
        margin-left: 10px;
      }
      #main .f .ulo li:nth-child(2) img{
        width: 300px;
        margin-top: 10px;
      }
      #main .f .ulo li .kphei{
        font-size: 16px;
        margin-top: 15px;
      }
      #main .f .ulo li .kphui{
        font-size: 13px;
        color: #676767;
        margin-top: 5px;
      }
      .kong{
        width: 100%;
        height: 100px;
      }
      #main .f .ulo li:nth-child(4){
        margin-top: 160px;
        text-align: center;
        border-top: 1px solid rgb(216, 216, 216);
      }
      #main .f .ulo li:nth-child(4) .lan{
        color: #266ee1;
        margin-top: 10px;
        font-size: 16px;
      }
      #main .f .json{
        width: 340px;
        margin-left: 20px;
        background-color: #fff;
        border-radius: 15px;
        margin-top: 10px;
      }
      #main .f .json li{
        width: 300px;
        margin: 0 auto;
        display: flex;
      }
      #main .f .json li img{
        width: 40px;
        height: 40px;
        margin-top: 20px;
      }
      #main .f .json .a{
        height: 60px;
        width: 200px;
        margin-top: 18px;
        margin-left: 10px;
      }
      #main .f .json .hei{
        font-size: 16px;
        margin-left: 10px;
        margin-top: 0;
      }
      #main .f .json .hui{
        font-size: 13px;
        color: #676767;
        margin-left: 10px;
        margin-top: 10px;
      }
      .none{
        text-align: center;
        width: 100%;
        background-color: #fff;
        display: none;
      }
      .none img{
        width: 50%;
        padding-bottom: 20px;
      }
      .menu{
            position: relative;
            width: 50px;
            height: 36px;
        }
        .menu span{
            display: block;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-size: 28px;
        }
        .ddown{
            position: absolute;
            right: 0;
            top: 36px;
            width: 180px;
            height: 180px;
            background-color: rgba(0, 0, 0, 0.818);
            display: none;
            border-radius: 10px;
        }
        .ddown .cd{
            width: 180px;
        }
        .ddown .cd li{
            width: 150px;
            margin: 0 auto;
            display: flex;
            height: 55px;
            margin-top: 5px;
            line-height: 50px;
        }
        .ddown .cd .icon-tianjiahaoyou-{
            font-size: 22px;
            color: #fff;
            margin-top: 7px;
            margin-left: 10px;
        }
        .ddown .cd .icon-daVrenzheng{
            font-size: 24px;
            color: #fff;
            margin-top: 7px;
            margin-left: 10px;
        }
        .ddown .cd .icon-fenxiang{
            font-size: 20px;
            color: #fff;
            margin-top: 7px;
            margin-left: 13px;
        }
        .ddown .cd p{
            font-size: 16px;
            color: #fff;
            font-family: "华文细黑";
        }
        .ddown .cd li:nth-child(1),.ddown .cd li:nth-child(2){
            border-bottom: 0.5px solid rgba(215, 215, 215, 0.474);
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>
            <a href="index.html">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="sheqv.html">
                <span class="iconfont icon-shequ"></span>
                <p>社区</p>
            </a>
        </li>
        <li>
            <a href="xiaoxi.html">
                <span class="iconfont icon-xiaoxi"></span>
                <p>消息</p>
            </a>
        </li>
        <li>
            <a href="xingcheng.html">
                <span class="iconfont icon-SX_015"></span>
                <p>行程</p>
            </a>
        </li>
        <li>
            <a href="wode.html">
                <span class="iconfont icon-wodejifen"></span>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <div id="tou">
    <div id="head">
        <ul class="he">
            <li><span class="iconfont icon-saoyisao"></span></li>
            <li><span class="iconfont icon-qiandao"></span></li>
            <li><span class="iconfont icon-ziyuan"></span></li>
            <li><span class="iconfont icon-shezhi"></span></li>
            <li>
                <div class="menu">
                    <span class="xlcd">···</span>
                    <div class="ddown">
                        <ul class="cd">
                            <li><span class="iconfont icon-tianjiahaoyou-"></span><p>添加好友</p></li>
                            <li><span class="iconfont icon-daVrenzheng"></span><p>社区V认证</p></li>
                            <li><span class="iconfont icon-fenxiang"></span><p>分享个人主页</p></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div id="name">
        <ul class="ul1">
            <li><img src="img/tx.jpg"></li>
            <li>
                <p class="yh">尊敬的携程用户<input type="submit" value="白银贵宾"  class="an"/></p>
                <input type="submit" value="社区lv.1"  class="lv"/>
            </li>
        </ul>
        <p class="hui">简单的自我介绍，让你更受欢迎</p>
        <ul class="ul2">
            <li>粉丝<span class="c"> 0</span></li>
            <li>关注<span class="c"> 0</span></li>
            <li>获赞<span class="c"> 0</span></li>
            <li>赞过<span class="c"> 0</span></li>
        </ul>
    </div>
</div>
    <div id="main">
        <div id="header">
            <ul id="xc">
                <li class="li">我的携程</li>
                <li class="li">个人主页</li>
            </ul>
        </div>
        <div class="box">
            <div class="tb">
                <ul>
                    <li>
                        <img src="img/tb1.png">
                        <p>全部订单</p>
                    </li>
                    <li>
                        <img src="img/tb2.png">
                        <p>待付款</p>
                    </li>
                    <li>
                        <img src="img/tb3.png">
                        <p>未出行</p>
                    </li>
                    <li>
                        <img src="img/tb4.png">
                        <p>待点评</p>
                    </li>
                </ul>
            </div>
            <div class="sc">
                <ul>
                    <li>
                        <p>0</p>
                        <p>我的收藏</p>
                    </li>
                    <li>
                        <p>9</p>
                        <p>浏览历史</p>
                    </li>
                    <li>
                        <p>246</p>
                        <p>积分</p>
                    </li>
                    <li>
                        <p>0</p>
                        <p>优惠券</p>
                    </li>
                </ul>
            </div>
            <div class="z">
                <ul>
                    <li><img src="img/z1.png"></li>
                    <li>
                        <div class="swiper ws">
                            <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                <p class="hei">9.5折起</p>
                                <p class="hui">优享会酒店</p>
                            </div>
                              <div class="swiper-slide">
                                <p class="hei">添加携程福利官</p>
                                <p class="hui">最高享￥688优惠券</p>
                            </div>
                              <div class="swiper-slide">
                                <p class="hei">比斯特会籍直通</p>
                                <p class="hui">直升奕享会籍享会员礼</p>
                              </div>
                            </div>
                        </div>
                    </li>
                    <li><img src="img/z2.png"></li>
                </ul>
            </div>
            <div class="qb">
                <ul>
                    <li>钱包</li>
                    <li>礼品卡 · 现金<span class="iconfont icon-guanbi"></span></li>
                </ul>
                <ul>
                    <li>
                        <p class="p1">1.08<span class="d">万</span></p>
                        <p class="p2">财富赚钱</p>
                        <p class="p3">新人体验金</p>
                    </li>
                    <li>
                        <p class="p1">1026<span class="d">券</span></p>
                        <p class="p2">拿去花</p>
                        <p class="p3">先享后付</p>
                    </li>
                    <li>
                        <p class="p1">20<span class="d">万</span></p>
                        <p class="p2">信用贷</p>
                        <p class="p3">最高可借</p>
                    </li>
                    <li>
                        <p class="p1">1.8<span class="d">万</span></p>
                        <p class="p2">白金卡</p>
                        <p class="p3">预估额度</p>
                    </li>
                </ul>
            </div>
            <div class="cz">
                <p class="b">创作中心</p>
                <ul>
                    <li>
                        <p class="x">￥<span class="wh">？500</span>/月</p>
                        <p class="zz">最高可赚</p>
                    </li>
                    <li>
                        <div class="bjs">
                            <img src="img/cz1.png">
                            <p>首篇有奖发布</p>
                        </div>
                    </li>
                    <li>
                        <div class="bjs">
                            <img src="img/cz2.png">
                            <p>赚现金</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="wd">
                <ul>
                    <li>我的工具</li>
                    <li>全部工具<span class="iconfont icon-guanbi"></span></li>
                </ul>
                <ul>
                    <li>
                        <img src="img/wdtb1.png">
                        <p>常用信息</p>
                    </li>
                    <li>
                        <img src="img/wdtb2.png">
                        <p>我的奖品</p>
                    </li>
                    <li>
                        <img src="img/wdtb3.png" class="te">
                        <p>报销凭证</p>
                    </li>
                    <li>
                        <img src="img/wdtb4.png">
                        <p>旅行足迹</p>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="img/wdtb5.png">
                        <p>订阅管理</p>
                    </li>
                    <li>
                        <img src="img/wdtb6.png">
                        <p>我的信用</p>
                    </li>
                    <li>
                        <img src="img/wdtb7.png">
                        <p>出行清单</p>
                    </li>
                    <li>
                        <img src="img/wdtb8.png">
                        <p>学生权益</p>
                    </li>
                </ul>
            </div>
            <div class="hd">
                <ul>
                    <li>活动广场</li>
                    <li>更多<span class="iconfont icon-guanbi"></span></li>
                </ul>
                <ul>
                    <li>
                        <img src="img/hd1.png">
                        <p>打牌领话费</p>
                    </li>
                    <li>
                        <img src="img/hd2.png">
                        <p>现金红包</p>
                    </li>
                    <li>
                        <img src="img/hd3.png">
                        <p>手机充值</p>
                    </li>
                    <li>
                        <img src="img/hd4.png">
                        <p>学生权益</p>
                    </li>
                </ul>
            </div>
            <p class="wdkp">我的卡片</p>
            <div class="f">
                <ul class="ulo">
                    <li><img src="img/hy-1.png"><p class="kpd">会员中心</p></li>
                    <li><img src="img/hy-2.png"></li>
                    <li>
                        <p class="kphei">优享会酒店</p>
                        <p class="kphui">预定酒店享折扣</p>
                    </li>
                </ul>
                <ul class="ulo">
                    <li><img src="img/hb-1.png"><p class="kpd">现金红包</p></li>
                    <li><img src="img/hb-2.png"></li>
                    <li>
                        <p class="kphei">看笔记，领现金</p>
                        <p class="kphui">可提现至银行卡</p>
                    </li>
                </ul>
                <ul class="ulo">
                    <li><img src="img/jr.png"><p class="kpd">现金红包</p></li>
                    <li>
                        <p class="kphei">携程财富 全新上线</p>
                        <p class="kphui">活期 稳健 基金多种产品…</p>
                    </li>
                    <li>
                        <p class="kphei">免年费白金信用卡</p>
                        <p class="kphui">预估额度￥17,700.00</p>
                    </li>
                    <li><p class="lan">查看详情</p></li>
                </ul>
                <ul class="json">
                    <li>
                        
                    </li>
                </ul>
            </div>
            <div class="kong"></div>
        </div>
        <div class="box none">
            <img src="img/n.png">
        </div>
    </div>

    <script src="swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".ws", {
        direction: "vertical",
        autoplay: {
          delay: 1500,
          disableOnInteraction: false,
        },
      });


    var jlist = document.getElementsByClassName("json")[0];
    function addLI(li){
    var n =`
    <img src="${li.img}">
    <div class="a">
        <p class="hei">${li.hei}</p>
        <p class="hui">${li.hui}</p>
    </div>
    `
    var nli = document.createElement("li");
    nli.innerHTML = n;
    jlist.appendChild(nli);
}
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var json = JSON.parse(xmlhttp.responseText);
        for(var i=0; i<json.length; i++){
            addLI(json[i]);
        }
}
}
xmlhttp.open("GET","JSON/wode.json", true);
xmlhttp.send();


        var tab = document.getElementById("main");
		var tt = main.getElementsByClassName("header")[0];
		var li = header.getElementsByTagName("li");
		var tc = main.querySelectorAll(".box");
		for (i = 0; i < li.length; i++) {
			li[i].onmouseover = function () {
				for (j = 0; j < tc.length; j++) {
					tc[j].style.display = "none";
					li[j].index = j;
					li[j].className = "";
				}
				tc[this.index].style.display = "block";
			}
		}


        var menu = document.getElementsByClassName("menu")[0];
        var span = menu.getElementsByTagName("span")[0];
        var ddown = menu.getElementsByClassName("ddown")[0];


        menu.onmouseover = function(){
            ddown.style.display = "block";
            span.className = "cur";
        }

        menu.onmouseout = function(){
            ddown.style.display = "none";
            span.className = "";
        }


        window.onscroll = function(){
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            if(st>tou.offsetHeight){
                header.style.position = "fixed";
            }
            else{
                header.style.position = "static";
            }
        }
    </script>
</body>
</html>